<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://www.12301.cc/tpl/ui/common/ui_common.css"/>
    <script language="javascript" src="http://www.12301.cc/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://www.12301.cc/js/echarts-2.2.1/build/dist/echarts-all.js"></script>
    <script language="javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
    <script>
        $(function(){
            changeType =function (starttime,endtime)
            {
                var action=7
                $.ajax({
                    url : "http://www.12301.cc/module/wxh/monthly/monthly.html",
                    type : "GET",
                    dataType : "json",
                    data : {
                        action    : action,
                        starttime : starttime,
                        endtime   : endtime
                    },beforeSend:function()
                    {
                        $(".payLoadImg").css("display","inline-block");
                    }, success:function(result) {
                        if(result.status=='failure')alert(result.msg)
                        var eles='',mems=''
                        for(var i in result)
                        {
                            if(i=='7'){
                                eles=result[i]/100
                            }else if(i=='8'){
                                mems=result[i]/100
                            }
                        }
                        var option = {
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient : 'vertical',
                                x : 'left',
                                data:['平台使用费','电子凭证费','短信费']
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    magicType : {
                                        show: true,
                                        type: ['pie', 'funnel'],
                                        option: {
                                            funnel: {
                                                x: '25%',
                                                width: '50%',
                                                funnelAlign: 'center',
                                                max: 1548
                                            }
                                        }
                                    },
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            series : [
                                {
                                    type:'pie',
                                    radius : ['50%', '70%'],
                                    itemStyle : {
                                        normal : {
                                            label : {
                                                show : false
                                            },
                                            labelLine : {
                                                show : false
                                            }
                                        },
                                        emphasis : {
                                            label : {
                                                show : true,
                                                position : 'center',
                                                textStyle : {
                                                    fontSize : '30',
                                                    fontWeight : 'bold'
                                                }
                                            }
                                        }
                                    },
                                    data:[
                                        {value:0, name:'平台使用费'},
                                        {value:eles, name:'电子凭证费'},
                                        {value:mems, name:'短信费'}
                                    ]
                                }
                            ]
                        };
                        var myChart = echarts.init($('#main')[0]);
                        myChart.setOption(option);
                    },
                    complete:function()
                    {
                        $(".payLoadImg").fadeOut("slow");
                    }
                })
            }
        });
    </script>

    <title>票付通旅游营销平台</title>
</head>
<body>
<div class="wrap">
    <P class="title">运营费用分析</P>
    <div class="topBox">
        <img class="payLoadImg" src="http://www.12301.cc/images/load.gif" />
        <div class="datemsg colorBlue">
            <ul>
                <li class="colorOrange clear">清空</li>
                <li class="tswk">七日</li>
                <li class="prwk">上周</li>
                <li class="tsmonth">本月</li>
                <li class="prmonth">上月</li>
            </ul>
            <div class="tipMsg">
                <p><span class="setFont_result"></span></p>
            </div>
        </div>
    </div>
    <div class="con">

    </div>
    <div id="main" style="height:600px;border:1px solid #ccc;padding:10px;"></div>

</div>

<div class="ui-page">
    <ul class="dropBox"></ul>
</div>

<!--------日历引入js-------------->
<link rel="stylesheet" href="css/jquery.ui.css" type="text/css" />
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/stay.js"></script>
<script type="text/javascript" src="js/paystatus.js"></script>
<script language="javascript" src="js/clickTime.js"></script>

<!--------日历引入js end-------------->
</body>
</html>